<template>
    <div>
        <h1>动画的过度</h1>
        <button @click="IsShow = !IsShow">显示/隐藏</button>
        <!-- appear 进出场的时候默认加载一次   name设置的话 样式的名称v也要进行修改调整-->
        <transition name="hoo2">
            <h2 v-show="IsShow">你好啊</h2>

            <!-- 自己写动画按照下面这样写 可以实现，Vue的话它给他提供了一个标签transition -->
            <!-- <h2 class="go" v-show="IsShow">你好啊</h2> -->
        </transition>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            IsShow:true
        }
    },
}
</script>
<style scoped>
    h2{
        background-color: yellow;   
        /* transition: all 2s; */
    }

    /* transition 标签一共提供4种过度 以及进场+离开 的动画效果  */
    .hoo2-enter,.hoo2-leave-to{
        transform: translateX(-100%);
    }

    /* 可以不使用这个 但是要在使用国度动画的元素上添加样式 transition: all 2s; 跟上面的h2类似  */
    .hoo2-enter-active,.hoo2-leave-active{
        transition: all 2s;
    }

    .hoo2-enter-to,.hoo2-leave{
        transform: translateX(0);
    }

    /* 优化代码 */
    /* .hoo-leave{
        transform: translateX(0);
    }

    .hoo-leave-to{
        transform: translateX(-100%);
    } */

    
</style>